<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style type="text/css">
    html,
    body {
        margin: 0 0;
        padding: 0 0;
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <!-- <canvas id="cvs" class="hidden" width="1980" height="1080"></canvas> -->
    <!-- <canvas id="screenImage" class="hidden" width="234" height="357"></canvas> -->
    <canvas id="rili" class="hidden" width="600" height="600"></canvas>
    <!-- <canvas id="display"></canvas> -->
    <script>
        function Deferred() {
            let p = this.promise = new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject;
            });
            this.then = this.promise.then.bind(p);
            this.catch = this.promise.catch.bind(p);
        }

        var cvs = document.getElementById("cvs");
        // var ctx = cvs.getContext("2d");

        var display = document.getElementById("display");
        // var displayCtx = display.getContext("2d");

        var screenImage = document.getElementById("screenImage");
        // var screenImageCtx = screenImage.getContext("2d");

        var rili = document.getElementById("rili");
        var riliCtx = rili.getContext("2d");

        var songInfo = {};
        var AllTimeBak = 0;
        var NowBak = 0;
        var DrawWarning = false;

        function drawRili() {
            riliCtx.clearRect(0, 0, 600, 600);
            var date = new Date();
            var year = date.getYear();
            var mouth = date.getMonth();
            var today = date.getDate();
            var week = date.getDay();

            var cardSize = 40;

            var array_three = [4, 6, 9, 11];
            var array_threeone = [1, 3, 5, 7, 8, 10, 12];
            var array_week = ["SUN", "MON", "TUES", "WED", "THUR", "FRI", "SAT"];

            var firstDraw; //1号绘制位置
            var wIdx = today % 7;

            if (week >= wIdx) {
                firstDraw = week - wIdx + 1;
            } else {
                firstDraw = week - wIdx + 8;
            }

            var dayIndex = 1;
            var countDay = 30;

            if (array_three.indexOf(mouth + 1) > -1) {
                countDay = 30;
            } else if (array_threeone.indexOf(mouth + 1) > -1) {
                countDay = 31;
            } else {
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)
                    countDay = 29;
                else
                    countDay = 28;
            }

            var row = 6;
            if (7 - firstDraw + 7 * 4 < countDay) { //确定表格行数，防止日期绘制不全
                row = 7;
            }

            function drawTodaybg(i, j) {
                riliCtx.save();

                riliCtx.beginPath();
                riliCtx.strokeStyle = "#900";
                riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 10, -Math.PI, Math.PI * 1);
                riliCtx.stroke();
                riliCtx.closePath();

                riliCtx.beginPath();
                riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 9, -Math.PI, Math.PI * 0.9);
                riliCtx.stroke();
                riliCtx.closePath();

                riliCtx.beginPath();
                riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 8, -Math.PI, Math.PI * 0.8);
                riliCtx.stroke();
                riliCtx.closePath();

                riliCtx.beginPath();
                riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 7, -Math.PI, Math.PI * 0.7);
                riliCtx.stroke();
                riliCtx.closePath();

                riliCtx.beginPath();
                riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 6, -Math.PI, Math.PI * 0.6);
                riliCtx.stroke();
                riliCtx.closePath();

                riliCtx.restore();
            }

            var isNum = /^\d+(\d+)?$/;

            function drawDate(txt, i, j) {
                riliCtx.textAlign = "center";
                riliCtx.fillStyle = "rgb(69,68,84)";
                riliCtx.font = (cardSize / 1.5) + 'px Impact';
                var yOffest = 3;

                if ((j == 0 || j == 6) && isNum.test(txt)) {
                    riliCtx.fillStyle = "#900";
                }

                riliCtx.fillText(txt.toString(), 45 + j * cardSize * 1.7 + cardSize / 1.18, 50 + i * cardSize + cardSize / 3 * 2 + yOffest);

                if (txt == today) {
                    drawTodaybg(j, i);
                }
            }

            riliCtx.fillStyle = "rgb(69,68,84)";
            riliCtx.font = "900 26pt SimHei";
            riliCtx.textAlign = "center";
            var monthCN = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
            riliCtx.scale(1.1, 1);
            riliCtx.fillText(monthCN[mouth] + "月", 260, 32);
            riliCtx.resetTransform();

            riliCtx.font = "20pt SimHei";
            riliCtx.textAlign = "end";
            riliCtx.fillText(today + "日", 520, 38);

            for (var i = 0; i < row; i++) {
                for (var j = 0; j < 7; j++) {
                    riliCtx.strokeRect(45 + j * cardSize * 1.70, 50 + i * cardSize, cardSize * 1.70, cardSize);
                }
            }

            dayIndex = 1;

            for (var i = 0; i < row; i++) { //开始绘制日期数
                for (var j = 0; j < 7; j++) {
                    if (i == 0) { //表格第一行绘制星期
                        drawDate(array_week[j], i, j);
                        continue;
                    }

                    if (i == 1 && j < firstDraw) { //确定1号绘制位置
                        continue;
                    }

                    if (dayIndex > countDay) { //只绘制月份的天数
                        break;
                    }

                    drawDate(dayIndex++, i, j);
                }
            }
        }

        var riliInterval = setInterval(drawRili, 3600000);
        drawRili();
    </script>
</body>

</html>